<h2><%= route ? '编辑' : '新建' %>路由</h2>
<form method="post" action="/routes/save" class="edit-form">
  <% if(route){ %><input type="hidden" name="id" value="<%= route.id %>"><% } %>
  <div class="form-row">
    <label for="name">名称：</label>
    <input id="name" name="name" value="<%= route ? route.name : '' %>" required>
  </div>
  <div class="form-row">
    <label for="method">方法：</label>
    <select id="method" name="method" required>
      <option value="GET" <%= route && route.method==='GET'?'selected':'' %>>GET</option>
      <option value="POST" <%= route && route.method==='POST'?'selected':'' %>>POST</option>
      <option value="PUT" <%= route && route.method==='PUT'?'selected':'' %>>PUT</option>
      <option value="DELETE" <%= route && route.method==='DELETE'?'selected':'' %>>DELETE</option>
    </select>
  </div>
  <div class="form-row">
    <label for="path">路径：</label>
    <input id="path" name="path" value="<%= route ? route.path : '' %>" required placeholder="/api/user/list">
  </div>
  <div class="form-row">
    <label for="delay">延迟(ms)：</label>
    <input id="delay" name="delay" type="number" value="<%= route ? route.delay : 0 %>" min="0">
  </div>
  <div class="form-row">
    <label for="responseScript">响应代码(JS)：</label>
    <div id="responseScriptEditor" style="height:467px;border:1px solid #d0d7de;border-radius:6px;"></div>
    <textarea id="responseScript" name="responseScript" style="display:none;"><%= route ? route.responseScript : '' %></textarea>
  </div>
  <div class="form-actions">
    <button type="submit">保存</button>
    <a href="/routes" class="btn-main">返回</a>
  </div>
</form>
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/loader.js"></script>
<script>
require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs' } });
require(['vs/editor/editor.main'], function() {
  var editor = monaco.editor.create(document.getElementById('responseScriptEditor'), {
    value: document.getElementById('responseScript').value,
    language: 'javascript',
    theme: 'vs-light',
    automaticLayout: true,
    minimap: { enabled: false },
    fontSize: 16,
    scrollBeyondLastLine: false,
    roundedSelection: false,
    scrollbar: { verticalScrollbarSize: 8, horizontalScrollbarSize: 8 },
    wordWrap: 'on',
    lineNumbers: 'off',
    glyphMargin: false,
    lineDecorationsWidth: 0,
    renderLineHighlight: 'none',
    padding: { top: 8, bottom: 8, left: 0, right: 0 },
    tabSize: 2,
    formatOnPaste: true,
    formatOnType: true
  });
  // 提交表单时将编辑器内容同步到隐藏 textarea
  document.querySelector('form.edit-form').addEventListener('submit', function() {
    document.getElementById('responseScript').value = editor.getValue();
  });
});
</script> 